<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            text-align: center;
            padding: 50px;
        }
        .addProjectBody{
            display: inline-block;
            width: 45%;
            text-align: left;
        }
        .projectName {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .projectInput {
            margin-bottom: 10px;
        }

        .projectInput button{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="addProjectBody">

        <el-row :gutter="20">
            <el-col :span="12">
                <div class="projectName">
                    项目编号
                </div>
                <div class="projectInput">
                    <el-autocomplete style="width: 100%" placeholder="请输入项目编号" v-model="pId" @select="handleSelect" :fetch-suggestions="querySearchAsync" @blur="queryProject()"></el-autocomplete>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    项目名称
                </div>
                <div class="projectInput">
                    <el-input placeholder="请输入项目名称" v-model="project.pName"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    余额方向
                </div>
                <div class="projectInput">
                    <el-select v-model="project.balanceDirection" placeholder="请选择余额方向" style="width: 100%;">
                        <el-option v-for="item in balanceDirections" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    归属部门
                </div>
                <div class="projectInput">
                    <el-select filterable clearable :disabled="isbCode"  v-model="project.bCode" placeholder="请选择部门" style="width: 100%;">
                        <el-option
                                v-for="item in departments"
                                :key="item.bcode"
                                :label="item.bcode+'/'+item.bname"
                                :value="item.bcode+'/'+item.bname">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    项目负责人 <a href="javaScript:void(0);" @click="selectUser()">选择负责人</a>
                </div>
                <div class="projectInput">
                    <el-input placeholder="请选择项目负责人" v-model="project.name" v-if="personCharge.bname!==undefined" :disabled="true"></el-input>
                    <el-input placeholder="请选择项目负责人" v-else :disabled="true"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    初期金额
                </div>
                <div class="projectInput">
                    <el-input placeholder="请输入初期金额" v-model="project.initialAmount"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    超支限额
                </div>
                <div class="projectInput">
                    <el-input placeholder="请输入限额值" v-model="project.limitPayment"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    级次
                </div>
                <div class="projectInput">
                    <el-input :disabled="true" v-model="project.level"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    明细
                </div>
                <div class="projectInput">
                    <el-input :disabled="true" value="明细级项目"></el-input>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="projectInput">
                    <el-button type="primary" @click="addProject()">添加项目信息</el-button>
                </div>
            </el-col>
        </el-row>

    </div>
</div>

<script>
    new Vue({
        el:"#app",
        mounted() {
            window.addEventListener('message', this.handleMessage);
        },
        created(){
            this.getDepartment();
        },
        methods:{
            handleSelect(item){
                this.queryProject();
            },
            querySearchAsync(queryString, cb){
                const formData = new FormData();
                formData.append("pName", queryString);
                axios.post("/project/getProject",formData)
                    .then((response)=>{
                        response = response.data;
                        if(response.code === 403){
                            location.href = "/page/logonPage"
                        }else if(response.code !== 200){
                            this.$message.error(response.message);
                        }else{
                            this.projectList = response.data;
                            cb(this.projectList);
                        }
                    })
            },
            handleMessage(message){
                if(message.data.page === "addProjectPid"){
                    this.pId = message.data.pid;
                    this.queryProject();
                    return;
                }
                this.personCharge = message.data;
                this.project.bCode = this.personCharge.bcode+"/"+this.personCharge.bname;
                this.project.name = this.personCharge.bname+'/'+this.personCharge.name
            },
            selectUser(){
                window.parent.postMessage({bCode:this.project.bCode,page:'addProject',departments:this.departments}, '*');
            },
            addProject(){
                //参数校验
                if(this.pId === undefined || this.pId.trim() === ""){
                    this.$message({
                        message: '请输入项目编号',
                        type: 'warning'
                    });
                    return;
                }else if(this.project.pName === undefined || this.project.pName.trim() === ""){
                    this.$message({
                        message: '请输入项目名称',
                        type: 'warning'
                    });
                    return;
                }else if(this.project.bCode === undefined || this.project.bCode.trim() === ""){
                    this.$message({
                        message: '请选择归属部门',
                        type: 'warning'
                    });
                    return;
                }else if(this.project.name === undefined || this.project.name.trim() === ""){
                    this.$message({
                        message: '请选择项目负责人',
                        type: 'warning'
                    });
                    return;
                }else{
                    //校验是否是数字
                    const regex = /^\d+(\.\d+)?$/;

                    if(!regex.test(this.project.initialAmount.toString()) && this.project.initialAmount>=0){
                        this.$message({
                            message: '请输入合适的初期金额',
                            type: 'warning'
                        });
                        return;
                    }else if(!regex.test(this.project.limitPayment.toString()) && this.project.initialAmount>=0){
                        this.$message({
                            message: '请输入合适的限制金额',
                            type: 'warning'
                        });
                        return;
                    }else if(!regex.test(this.project.balance.toString()) && this.project.initialAmount>=0){
                        this.$message({
                            message: '请输入合适的余额',
                            type: 'warning'
                        });
                        return;
                    }else{
                        if(!this.lock){
                            this.lock = true;
                            const formData = new FormData();
                            formData.append("pId", this.pId);
                            formData.append("pName", this.project.pName);
                            formData.append("bCode", this.project.bCode.split("/")[0]);
                            formData.append("balanceDirection", this.project.balanceDirection);
                            formData.append("userId", this.personCharge.userId);
                            formData.append("initialAmount", this.project.initialAmount);
                            formData.append("limitPayment", this.project.limitPayment);
                            axios.post("/project/addProject",formData)
                                .then((response)=>{
                                    response = response.data;
                                    if(response.code === 403){
                                        location.href = "/page/logonPage"
                                    }else if(response.code !== 200){
                                        this.$message.error(response.message);
                                    }else{
                                        this.$message({
                                            message: '添加项目信息成功',
                                            type: 'success'
                                        });
                                        this.project = {
                                            bCode: '',
                                            level: '',
                                            name:"",
                                            pName: '',
                                            balanceDirection: "1",
                                            initialAmount: 0,
                                            income:0,
                                            expenses:0,
                                            freezeAmount:0,
                                            limitPayment:0,
                                            balance:0
                                        }
                                        this.isbCode = false;
                                        this.personCharge = {};
                                        this.pId = '';
                                    }
                                }).finally(() =>{
                                this.lock = false;
                            })
                        }
                    }
                }

            },
            getDepartment(){
                axios.post("/department/getDepartment")
                    .then((response)=>{
                        response = response.data;
                        if(response.code === 403){
                            location.href = "/page/logonPage"
                        }else if(response.code !== 200){
                            this.$message.error(response.message);
                        }else{
                            this.departments = response.data;
                        }
                    })
            },
            queryProject(){
                this.isbCode = false;
                if(this.pId === ""){
                    return;
                }
                const formData = new FormData();
                formData.append("pId", this.pId);
                axios.post("/project/queryProject",formData)
                    .then((response)=>{
                        response = response.data;
                        if(response.code === 403){
                            location.href = "/page/logonPage"
                        }else if(response.code === 20001){
                            this.$message.error(response.message);
                        }else if(response.code === 200){
                            if(response.data.bCode === undefined){
                                this.$message({
                                    message: response.data,
                                    type: 'warning'
                                });
                                return;
                            }
                            this.project.bCode = response.data.bCode;
                            this.pId = response.data.pid;
                            this.project.balanceDirection = response.data.balanceDirection;
                            this.isbCode = true;
                        }
                    })
            }
        },
        watch:{
            project: {
                handler: function(newVal, oldVal) {
                    if(this.personCharge.bname!==undefined){
                        if(oldVal.bCode.split("/")[1] !== this.personCharge.bname){
                            this.personCharge = {};
                        }
                    }
                },
                deep: true,
                immediate: true,
            },
            pId: {
                handler: function(newVal, oldVal) {
                    var pid = newVal;
                    if(pid.length>7 || pid.length<3){
                        this.project.level = '';
                        return;
                    }
                    if(pid.length===3){
                        this.project.level = 1;
                    }else{
                        if(pid.length === 5){
                            this.project.level = 2;
                        }else if(pid.length === 7){
                            this.project.level = 3;
                        }
                    }
                },
                deep: true,
                immediate: true,
            }
        },
        data(){
            return{
                isFocused: false,
                pId:'',
                projectList:[],
                personCharge:{},
                departments: [],
                lock:false,
                isbCode:false,
                project:{
                    bCode: '',
                    level: 1,
                    name:"",
                    pName: '',
                    balanceDirection: "1",
                    initialAmount: 0,
                    income:0,
                    expenses:0,
                    freezeAmount:0,
                    limitPayment:0,
                    balance:0
                },
                balanceDirections:[
                    {
                        value: "0",
                        label: '支出'
                    },
                    {
                        value: "1",
                        label: '收入'
                    }
                ]
            }
        }
    })
</script>
</body>
</html>